<template>
  <div>
    <el-card>
      <el-input placeholder="请输入链接地址"
        v-model="input">
      </el-input>
      <el-button @click="showQRCode"
        type="primary"
        size="small"
        :disabled="isDisabled">生成二维码</el-button>
      <el-button @click="delQRCode"
        type="primary"
        size="small"
        :disabled="!isDisabled">删除二维码</el-button>
      <div class="qrcode"
        ref="qrcodeContainer"></div>
    </el-card>
  </div>
</template>
   
<script>
import QRCode from 'qrcodejs2'  // 引入qrcode
export default {
  name: 'qrcodejs2',
  data() {
    return {
      input: '',
      isDisabled: false
    }
  },
  methods: {
    showQRCode() {
      //   this.$refs.qrcodeContainer.innerHTML = ''
      if (this.input !== '') {
        new QRCode(this.$refs.qrcodeContainer, {
          width: 200,
          height: 200,
          text: this.input, // 二维码地址
          colorDark: "#000",
          colorLight: "#fff",
          correctLevel: QRCode.CorrectLevel.H
        })
        this.$message({
          message: '二维码已生成！',
          type: 'success'
        })
        this.isDisabled = true
      } else {
        this.$message({
          message: '请输入链接地址!',
          type: 'warning'
        })
      }
    },
    delQRCode() {
      this.$refs.qrcodeContainer.innerHTML = ''
      this.$refs.qrcodeContainer.title = ''
      this.$message({
        message: '二维码已删除！',
        type: 'success'
      })
      this.input = ''
      this.isDisabled = false
    }
  }
}
</script>
<style lang='css' scoped>
/deep/ .el-card {
  width: 500px;
  height: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
/deep/ .el-input {
  width: 245px;
  height: 35px;
  margin-right: 20px;
}
/deep/ .el-input__inner {
  height: 35px;
}
.qrcode {
  width: 250px;
  height: 250px;
  margin-top: 20px;
  margin-left: 120px;
}
img {
  width: 250px;
  height: 250px;
  background-color: #fff;
  padding: 6px;
}
</style>